<!--
  档案管理组织病理
  lzx
  2020年1月13日
-->
<template lang='pug'>
  el-container
    el-header.header
      title-bg
    el-container
      el-aside.nav-layout(width="258px")
        nav-menu
      el-main.main-live
        div.boxSon
          p {{titleName}}-档案管理
          div(v-if="this.identity[0].identity === '管理专家'")
            el-select(v-model="specUnit" @change="getAdminFile" placeholder="请选择原切片单位")
              el-option(v-for="item in specUnitData"
              :key="item.hospitalName"
              :label="item.hospitalName"
              :value="item.id")
            el-select(v-model="specPhy" @change="getAdminFile" placeholder="请选择申请医师")
              el-option(v-for="item in specPhyData"
              :key="item.doctor"
              :label="item.name"
              :value="item.id")
            input(placeholder="请输入患者姓名" v-model="search")
            div.btn(@click="getAdminFile") 查询
            div.btn(@click="reset") 重置
          div(v-if="this.identity[0].identity === '专家'")
            el-select(v-model="specUnit" @change="report" placeholder="请选择原切片单位")
              el-option(v-for="item in specUnitData"
              :key="item.hospitalName"
              :label="item.hospitalName"
              :value="item.id")
            el-select(v-model="specPhy" @change="report" placeholder="请选择申请医师")
              el-option(v-for="item in specPhyData"
              :key="item.doctor"
              :label="item.name"
              :value="item.id")
            input(placeholder="请输入患者姓名" v-model="search")
            div.btn(@click="report") 查询
            div.btn(@click="reset") 重置
          div(v-if="this.identity[0].identity === '医生'")
            input(placeholder="请输入患者姓名" v-model="search")
            div.btn(@click="getAjax") 查询
            div.btn(@click="reset") 重置
        div.main-content-box
          el-row(:gutter="28")
            el-col(:span="16")
              el-card
                div(slot="header").card-title 档案列表
                el-table(:data="tableData" @row-click="getDetails" :height="tableHeight" stripe)
                  el-table-column(type="index" label="序号" align="center")
                  el-table-column(label="患者姓名" prop="name" align="center" width="120")
                  el-table-column(label="申请医师" prop="doctor" align="center" width="120")
                  el-table-column(label="原切片单位" prop="hospitalName" align="center")
                  el-table-column(label="申请时间" prop="applicationTime" align="center")
                  el-table-column(label="报告状态" prop="status" aling="center")
                div.pagination-box
                  el-pagination(
                  layout="prev, pager, next"
                  :total="total"
                  @current-change="handleCurrentChange")
            el-col(:span="8")
              el-card.form-card
                div(slot="header").card-title 档案详情
                  div.card-record(ref="record" v-if="this.identity[0].identity === '医生'")
                    div.card-new(@click="recordClick") 新建档案
                    div.card-modification(@click="modifier") 修改档案
                  div.card-record(ref="record" v-if="this.identity[0].identity === '管理专家'")
                    div.card-modification(@click="modifier") 修改档案
                div(ref="form").patient-box
                  el-form(:model="formModel" label-width="130px" size="medium")
                    el-form-item(label="患者姓名：")
                      el-input(v-model="formModel.name" readonly)
                    el-form-item(label="年龄：")
                      el-input(v-model="formModel.age" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')" readonly)
                    el-form-item(label="性别：")
                      el-input(v-model="formModel.sex" disabled)
                    el-form-item(label="申请医师：")
                      el-input(v-model="formModel.doctor" disabled)
                    el-form-item(label="申请时间：")
                      el-input(v-model="formModel.applicationTime" disabled)
                    el-form-item(label="原切片单位：")
                      el-input(v-model="formModel.hospitalName" readonly)
                    el-form-item(label="切片类型：")
                      el-input(v-model="formModel.className" readonly)
                    el-form-item(label="病理号：")
                      el-input(v-model="formModel.pathologyNum" readonly)
                    el-form-item(label="临床诊断：" oninput="value=value.replace(/[^\d]/g,'')")
                      el-input(v-model="formModel.diagnosis" readonly)
                    el-form-item(label="肉眼及手术所见：")
                      el-input(v-model="formModel.diagnosisDetail" type="textarea" resize="none" readonly :rows="4")
    div.formShade(ref="formSade")
    div.form-box(ref="formBox")
      div.cloneWindow(@click="cloneWindow") X
      div 新增档案
      el-form(:model="formModelNew" label-width="130px" size="medium")
        el-form-item(label="患者姓名：")
          el-input(v-model="formModelNew.name")
        el-form-item(label="年龄：")
          el-input(v-model="formModelNew.age" maxlength="4" oninput="value=value.replace(/[^0-9.]+/,'')")
        el-form-item(label="性别：")
          el-radio(v-model="formModelNew.sex" label="1") 男
          el-radio(v-model="formModelNew.sex" label="2") 女
        el-form-item(label="申请医师：")
          el-input(v-model="formModelNew.doctor" disabled)
        el-form-item(label="申请时间：")
          el-input(v-model="formModelNew.date" disabled)
        el-form-item(label="原切片单位：")
          el-input(v-model="formModelNew.hospital" readonly)
        el-form-item(label="切片类型：")
          el-input(v-model="formModelNew.className" readonly)
          <!--el-select(v-model="formModelNew.slicType" placeholder="请选择")-->
          <!--el-option(-->
          <!--v-for="item in newPathology"-->
          <!--:key="item.className"-->
          <!--:label="item.className"-->
          <!--:value="item.id")-->
        el-form-item(label="病理号：")
          el-input(v-model="formModelNew.num" oninput="value=value.replace(/[^0-9.]+/,'')")
        el-form-item(label="临床诊断：")
          el-input(v-model="formModelNew.diagnosis" maxlength="10")
        el-form-item(label="肉眼及手术所见：")
          el-input(v-model="formModelNew.diagnosisDetail" type="textarea" resize="none" :rows="4")
      div.saveData(@click="saveData") 提交档案
    div.form-box(ref="formBoxMod")
      div.cloneWindow(@click="cloneWindow") X
      div 修改档案
      el-form(:model="formModelMod" label-width="130px" size="medium")
        el-form-item(label="患者姓名：")
          el-input(v-model="formModelMod.name")
        el-form-item(label="年龄：")
          el-input(v-model="formModelMod.age" maxlength="4" oninput="value=value.replace(/[^0-9.]+/,'')")
        el-form-item(label="性别：")
          el-radio(v-model="formModelMod.sex" label="1") 男
          el-radio(v-model="formModelMod.sex" label="2") 女
        el-form-item(label="申请医师：")
          el-input(v-model="formModelMod.doctor" disabled)
        el-form-item(label="申请时间：")
          el-input(v-model="formModelMod.applicationTime" disabled)
        el-form-item(label="原切片单位：")
          el-input(v-model="formModelMod.hospitalName" readonly)
        el-form-item(label="切片类型：")
          el-input(v-model="formModelMod.className" readonly)
          <!--el-select(v-model="formModelMod.classDoctorName" placeholder="请选择")-->
          <!--el-option(-->
          <!--v-for="item in modPathology"-->
          <!--:key="item.className"-->
          <!--:label="item.className"-->
          <!--:value="item.id")-->
        el-form-item(label="病理号：")
          el-input(v-model="formModelMod.pathologyNum")
        el-form-item(label="临床诊断：")
          el-input(v-model="formModelMod.diagnosis" maxlength="10")
        el-form-item(label="肉眼及手术所见：")
          el-input(v-model="formModelMod.diagnosisDetail" type="textarea" resize="none" :rows="4")
      div.saveData(@click="modRecord") 提交档案
</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'
  import Message from '../../common/message'

  export default {
    name: 'reccell',
    components: {
      TitleBg,
      NavMenu
    },
    data() {
      return {
        personal: null,
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        tableHeight: null, // 表格高度——随屏幕高度实时变化
        total: 100, // 默认数据总数
        pageSize: 11, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        tableData: [], // 档案列表表格数据
        search: '', // 患者姓名
        options: [],
        value: '',
        radio: '1',
        currentRow: null,
        formModel: {}, // 患者信息表单数据
        formModelNew: {
          name: '',
          age: '',
          sex: null,
          doctor: '',
          date: '',
          hospital: '',
          slicType: '',
          num: '',
          diagnosis: '',
          diagnosisDetail: ''
        }, // 患者信息表单数据新增
        formModelMod: {
          name: '',
          age: null,
          sex: null,
          doctor: '',
          applicationTime: '',
          hospitalName: '',
          classDoctorName: '',
          pathologyNum: '',
          diagnosis: '',
          diagnosisDetail: ''
        }, // 患者信息表单数据修改
        identity: '',
        specUnit: '', // 专家切片单位
        specUnitData: null, // 原切片单位
        specPhy: '', // 专家申请医师
        specPhyData: null, // 申请医师
        orgclassify: null, // 组织分类获取
        classifyArrNew: '',
        classifyArrMod: '',
        paging: '',
        newPathology: {},
        modPathology: {},
        classDoctorName: '',
        titleName: ''
      }
    },
    created() {
      // 身份判断
      this.identity = JSON.parse(this.$KalixCatch.get('personaltwo'))
    },
    mounted() {
      this.orgclassifyorg() // 组织分类获取
      const that = this
      // 窗口变化重新计算高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
            that.$refs.form.style.height = that.fullHeight - 278 - 50 + 'px' // 患者详情表单高度
          })
        })()
      }
      this.$nextTick(() => {
        that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
        that.$refs.form.style.height = that.fullHeight - 278 - 50 + 'px'// 患者详情表单高度
      })
      this.classify()
    },
    methods: {
      classify() { // 病理分类获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/classs/getArchives'
        }).then((res) => {
          this.newPathology.className = res.data.data[0].className
          this.newPathology.id = res.data.data[0].id
          // console.log('this.pathology++++++++++++++', this.modPathology)
        })
      },
      orgclassifyorg() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/classs/getArchives'
        }).then((res) => {
          this.orgclassify = res.data.data[0].id
          this.titleName = res.data.data[0].className
          if (this.identity[0].identity === '专家') {
            this.doctorlist() // 专家身份获取医院列表
            this.getAdminDoctor() // 专家身份获取申请医生列表
            this.report()
          } else if (this.identity[0].identity === '管理专家') {
            this.specialist() // 专家身份获取医院列表
            this.getAdminDoctor() // 专家身份获取申请医生列表
            this.getAdminFile()
          } else if (this.identity[0].identity === '医生') {
            this.getAjax()
          }
        })
      },
      getAdminDoctor() { // 管理专家身份获取医生列表
        this.axios.request({
          method: 'GET',
          url: 'camel/rest/users/getAdminDoctor/'
        }).then((res) => {
          this.specPhyData = res.data.data
        })
      },
      specialist() { // 专家身份获取医院列表
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/hospitals/'
        }).then((res) => {
          this.specUnitData = res.data.data
        })
      },
      doctorlist() { // 专家身份获取申请医生列表
        this.axios.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/reports/selectDoctor',
          params: {
            expertId: this.identity[0].id
          }
        }).then((res) => {
          this.specPhyData = res.data.data
        })
      },
      modRecord() { // 修改
        if (this.formModelMod.name !== '' && this.formModelMod.age !== '' && this.formModelMod.sex !== '' && this.modPathology.id !== '' && this.formModelMod.id !== '' && this.formModelMod.pathologyNum !== '' && this.formModelMod.diagnosis !== '' && this.formModelMod.diagnosisDetail !== '') {
          this.axios.request({
            method: 'PUT',
            url: '/camel/rest/telemedicine/files/' + this.formModelMod.id + '/updateFile',
            params: {
              name: this.formModelMod.name,
              age: this.formModelMod.age,
              sex: this.formModelMod.sex,
              cid: this.newPathology.id,
              id: this.formModelMod.id,
              pathologyNum: this.formModelMod.pathologyNum,
              diagnosis: this.formModelMod.diagnosis,
              diagnosisDetail: this.formModelMod.diagnosisDetail
            }
          }).then((res) => {
            if (res.data.msg === '保存成功！') {
              Message.success(res.data.msg)
              if (this.identity[0].identity === '管理专家') {
                this.getAdminFile()
                this.cloneWindow()
                console.log('管理专家+++++++++')
              } else if (this.identity[0].identity === '医生') {
                this.getAjax()
                this.cloneWindow()
                console.log('医生+++++++++')
              }
            } else {
              Message.error(res.data.msg)
            }
          })
        } else {
          Message.warning('请填写完整档案')
        }
      },
      saveData() { // 新增
        if (this.formModelNew.name !== '' && this.formModelNew.age !== '' && this.formModelNew.sex !== '' && this.newPathology.id !== '' && this.formModelNew.num !== '' && this.formModelNew.diagnosis !== '' && this.formModelNew.diagnosisDetail !== '') {
          this.axios.request({
            method: 'GET',
            url: '/camel/rest/telemedicine/files/addFile',
            params: {
              name: this.formModelNew.name,
              age: this.formModelNew.age,
              sex: this.formModelNew.sex,
              doctorId: this.identity[0].id,
              applicationTime: this.formModelNew.date,
              cid: this.newPathology.id,
              hospitalId: this.identity[0].hospitalId,
              pathologyNum: this.formModelNew.num,
              diagnosis: this.formModelNew.diagnosis,
              diagnosisDetail: this.formModelNew.diagnosisDetail
            }
          }).then((res) => {
            if (res.data.msg === '保存成功！') {
              // console.log('this.formModelNew1111+++++++++++++++++++', this.formModelNew)
              this.formModelNew.name = ''
              this.formModelNew.age = ''
              this.formModelNew.name = ''
              this.formModelNew.num = ''
              this.formModelNew.diagnosis = ''
              this.formModelNew.diagnosisDetail = ''
              Message.success(res.data.msg)
              this.getAjax()
              this.cloneWindow()
            } else {
              Message.error(res.data.msg)
              console.log('this.formModelNew2222+++++++++++++++++++', this.formModelNew)
            }
          })
        } else {
          Message.warning('请填写完整档案')
          console.log('this.formModelNew2222+++++++++++++++++++', this.formModelNew)
        }
      },
      modifier() { // 修改
        if (this.identity[0].identity !== '管理专家') {
          if (this.formModel.status === '未打印') {
            this.$refs.formBoxMod.style.display = 'block'
            this.$refs.formSade.style.display = 'block'
            this.formModelMod = JSON.parse(JSON.stringify(this.formModel))
            console.log('this.formModelMod++++', this.formModelMod)
            if (this.formModel.sex === '男') {
              this.formModelMod.sex = '1'
            } else {
              this.formModelMod.sex = '2'
            }
          } else {
            Message.warning('档案已打印')
          }
        } else {
          this.$refs.formBoxMod.style.display = 'block'
          this.$refs.formSade.style.display = 'block'
          this.formModelMod = JSON.parse(JSON.stringify(this.formModel))
          console.log('this.formModelMod++++', this.formModelMod)
          if (this.formModel.sex === '男') {
            this.formModelMod.sex = '1'
          } else {
            this.formModelMod.sex = '2'
          }
        }
      },
      cloneWindow() { // 新增窗口关闭
        this.$refs.formBox.style.display = 'none'
        this.$refs.formSade.style.display = 'none'
        this.$refs.formBoxMod.style.display = 'none'
        this.formModelNew.name = ''
        this.formModelNew.age = ''
        this.formModelNew.name = ''
        this.formModelNew.num = ''
        this.formModelNew.diagnosis = ''
        this.formModelNew.diagnosisDetail = ''
        this.formModel.slicType = ''
      },
      recordClick() { // 新增窗口
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()
        if (hour < 10) {
          hour = '0' + hour
        }
        if (minute < 10) {
          minute = '0' + minute
        }
        if (second < 10) {
          second = '0' + second
        }
        let time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
        console.log('this.formModelNew++++++++++++', this.formModelNew)
        this.$refs.formBox.style.display = 'block'
        this.$refs.formSade.style.display = 'block'
        this.formModelNew.date = time
        this.formModelNew.slicType = ''
        this.formModelNew.className = this.newPathology.className
        this.formModelNew.doctor = this.identity[0].name
        this.formModelNew.hospital = this.identity[0].hospital
        console.log('this.identity[0]++++++++++++', this.identity[0])
      },
      // 切换当前页
      handleCurrentChange(val) {
        this.currentPage = val
        if (this.identity[0].identity === '专家') {
          this.report()
        } else if (this.identity[0].identity === '管理专家') {
          this.getAdminFile()
        } else if (this.identity[0].identity === '医生') {
          this.getAjax()
        }
      },
      getDetails(row) { // 点击表格切换数据
        this.formModel = row
        if (row.age === '1') {
          this.formModel.sex = '男'
        } else {
          this.formModel.sex = '女'
        }
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      reset() { // 重置
        this.specUnit = ''
        this.specPhy = ''
        this.search = ''
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/files/getFile',
          params: {
            cid: this.orgclassify,
            hospitalId: 0,
            doctorId: this.identity[0].id,
            name: '',
            num: 1
          }
        }).then((res) => {
          this.tableData = res.data.data
          if (this.tableData.length > 0) {
            this.formModel = JSON.parse(JSON.stringify(this.tableData[0]))
            this.total = res.data.totalCount * 10
            if (this.tableData[0].sex === '1') {
              this.formModel.sex = '男'
            } else {
              this.formModel.sex = '女'
            }
          }
        })
      },
      getAdminFile() { // 业务专家表格数据获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/files/getAdminFile',
          params: {
            cid: this.orgclassify,
            hospitalId: this.specUnit === '' ? 0 : this.specUnit,
            doctorId: this.specPhy === '' ? 0 : this.specPhy,
            name: this.search,
            num: this.currentPage
          }
        }).then((res) => {
          this.tableData = res.data.data
          if (this.tableData.length > 0) {
            this.formModel = JSON.parse(JSON.stringify(this.tableData[0]))
            console.log('this.tableData[0]+++++++++++++', JSON.parse(JSON.stringify(this.tableData[0])))
            this.total = this.paging = res.data.totalCount * 10
            if (this.tableData[0].sex === '1') {
              this.formModel.sex = '男'
            } else {
              this.formModel.sex = '女'
            }
          }
        })
      },
      report() { // 专家表格数据获取
        this.axios.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/reports/getFileExpert',
          params: {
            doctorId: this.specPhy === '' ? 0 : this.specPhy, // 申请医生
            unit: this.specUnit === '' ? 0 : this.specUnit, // 医院id
            patient: this.search, // 患者姓名
            id: this.identity[0].id,
            identity: this.identity[0].identity,
            cid: this.orgclassify,
            num: this.currentPage
          }
        }).then((res) => {
          this.tableData = res.data.data
          if (this.tableData.length > 0) {
            this.formModel = JSON.parse(JSON.stringify(this.tableData[0]))
            this.total = this.paging.totalCount * 10
            if (this.tableData[0].sex === '1') {
              this.formModel.sex = '男'
            } else {
              this.formModel.sex = '女'
            }
          }
        })
      },
      getAjax() { // 表格数据获取
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/files/getFile',
          params: {
            cid: this.orgclassify,
            hospitalId: this.specUnit === '' ? 0 : this.specUnit,
            doctorId: this.identity[0].id,
            name: this.search,
            num: this.currentPage
          }
        }).then((res) => {
          this.tableData = res.data.data
          if (this.tableData.length > 0) {
            this.formModel = JSON.parse(JSON.stringify(this.tableData[0]))
            this.total = this.paging = res.data.totalCount * 10
            if (this.tableData[0].sex === '1') {
              this.formModel.sex = '男'
            } else {
              this.formModel.sex = '女'
            }
          }
        })
      }
    },
    watch: {
      // 监听屏幕可视区域高度变化
      fullHeight(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的fullHeight值改变，就将其重新赋给data里的fullHeight
          this.fullHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    }
  }
</script>

<style scoped lang='stylus'>
  .boxRight
    width 84%
    display inline-block
    vertical-align top
    padding-top 38px
    box-sizing border-box

  .boxSon
    margin-top 38px

    div
      display inline-block
      margin-right 20px

    p
      color #fff
      font-size 20px
      margin-bottom 20px
      font-weight 700

    input
      width 217px
      height 42px
      background-color rgba(0, 0, 0, 0.2)
      color #fff
      padding-left 18px
      padding-right 18px
      box-sizing border-box
      vertical-align top
    input:

    :-webkit-input-placeholder
      color #A9B3C3

    .btn
      display inline-block
      width 66px
      height 42px
      line-height 42px
      text-align center
      background-color #0F5ABC
      border 1px solid #fff
      vertical-align top
      margin-left 20px
      color #fff
      cursor pointer
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      border-radius 5px
      box-sizing border-bo

  .header
    padding 0

  .nav-layout
    position relative
    height 100%

  .main-live
    margin-left 27px
    padding 0

    .main-content-box
      padding-right 27px
      overflow-y auto
      overflow-x hidden

      .main-content-title
        color #a2c8f8
        font-size 14px

      .el-card
        margin-top 25px

        .card-title
          font-size 16px

        .card-record
          float right
          margin-top -7px

          div
            display inline-block
            height 34px
            line-height 34px
            text-align center
            cursor pointer
            font-size 12px
            padding 0 10px
            vertical-align top

          .card-new
            background-color #fff
            color #6BBBF9
            border 1px solid #6BBBF9
            border-radius 18px

          .card-modification
            background-color #6BBBF9
            color #fff
            border-radius 18px
            margin-left 12px

        .pagination-box
          display flex
          justify-content center

          .pagination-btn
            display inline-block
            vertical-align middle
            margin-top 15px

  .form-card
    .el-form-item
      margin-bottom 20px

  .form-box
    width 600px
    height 800px
    display none
    position absolute
    left 50%
    top 50%
    transform translate(-50%, -50%)
    background-color: #fff
    padding 40px
    box-sizing border-box
    z-index 10

  .formShade
    width 1920px
    height 1080px
    background-color rgba(0, 0, 0, 0.1)
    position absolute
    display none

  .cloneWindow
    position absolute
    top 10px
    right 10px
    cursor pointer

  .saveData
    width 92px
    height 34px
    text-align center
    line-height 34px
    border 1px solid #6BBBF9
    margin-left 220px
    color #6BBBF9
    border-radius 20px

  .paging
    position absolute
    left 50%
    bottom 20px
    transform translateX(-50%)

  .patient-box
    overflow auto
</style>

<style lang="stylus">
  .boxSon .el-input__inner
    background-color rgba(0, 0, 0, 0.1)
    border none
    width 217px
    height 42px
    border-radios 0
    vertical-align middle
    color #fff

  .form-box .el-select
    width 400px
</style>
